<template>
	<h3>能源汽车问卷调查</h3>
	<input type="text" value="请输入类型" /><br />
	<input type="text" v-model="cartype" /><br />
	<input type="radio" name="sex" value="man" v-model="gender" />男
	<input type="radio" name="sex" value="felman" v-model="gender" />女
	<!-- <p>输入的信息是：{{cartype}}</p>
	<p>输入的性别是：{{gender}}</p> -->
	<select v-model="likecar">
		<option value="请选择汽车类型">请选择汽车类型</option>
		<option value="燃油汽车">燃油汽车</option>
		<option value="混合动力汽车">混合动力汽车1</option>
		<option value="纯电动汽车">纯电动汽车1</option>
		<option value="氢燃料汽车">氢燃料汽车</option>
	</select>
	<input type="text" v-model.number="n1"/> + <input type="text" v-model.number="n2"/>={{n1+n2}}
	<p>输入的信息是：{{cartype}}</p>
	<p>输入的性别是：{{gender}}</p>
	<p>输入的汽车类型是：{{likecar}}</p>
</template>

<script setup>
	import { ref } from 'vue';
	//双向数据绑定指令，v-model,一般用于表单元素，如input,select,textarea等
	//<标签名 v-model="数据名"></标签名>
	//v-model内部会为不同的元素绑定不同的属性和事件，具体如下。
	//textarea元素和text类型的input元素会绑定value属性和input事件。
	//checkbox类型的input元素和radio类型的input元素会绑定checked属性和change事件。
	//select元素会绑定value属性和change事件。
	
	//定义变量
	const cartype=ref('请输入汽车类型')
	const gender=ref('')
	const likecar=ref('')
	const n1=ref(1)
	const n2=ref(2)
</script>

<style>
</style>